<template>
  <div id="personal">
        <section>
            <div class="usrhd_top">
              <div class="usrhd_tfq">
                <p>4907</p>
                <p>听歌数</p>
              </div>
                <div class="usrhd_tfq">
                <img src="http://p2.music.126.net/1fdRJh3AYo0TDMTyOLPIUw==/109951164464529970.jpg?imageView=1&thumbnail=240x0" alt="">
              </div>  
              <div class="usrhd_tfq">
                <p>768</p>
                <p>粉丝数</p>
              </div>
            </div>
            <div class="usrhd_info">
              <div class="usrhd_name">
                <p>拳小摆</p>
              </div>
              <div class="usrhd_follow">
                <p>+ 关注</p>
              </div>
            </div>
        </section>
        <h3>歌单{{carArr.length}}</h3>
        <car :carArr="carArr"></car>
        <div class="footer-wrap">
          <h5>去TA的个人主页</h5>
        </div>
  </div>
</template>

<script>
import car from "../components/Car.vue"
export default {
data :()=> {
  return{
    carArr:[]
  }
},
 async mounted(){
   let res = await this._axios.get("/user/playlist?uid=305334573")
  //  console.log(res.data.playlist);
   this.carArr = res.data.playlist;
  //  console.log(this.carArr);
 },
components:{
car,
}
}
</script>

<style lang="scss" scoped>
#personal{
    font-size: _vw(40);
  section{
    text-align: center;
    color: #fff;
    height: _vw(450);
    background-image: url(http://p1.music.126.net/VTW4vsN08vwL3uSQqPyHqg==/2002210674180199.jpg?imageView=1&thumbnail=100y65);
    overflow: hidden;
      .usrhd_top{
      margin-top: _vw(100);
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      img{
        width: _vw(150);
        border-radius: _vw(70);
      }
      }
       .usrhd_info{
    display: flex;
    flex-direction: column;
    align-items: center;
    p{
      line-height: _vw(50);
    }
    .usrhd_follow{
      width: _vw(240);
      height: _vw(60);
      line-height: _vw(60);
      margin-top: _vw(10);
      border-radius: _vw(20);
      border: 1px solid wheat;
    }
  }
}
h3{
  height: _vw(60);
  line-height: _vw(60);
  padding-left: _vw(20);
  background-color: gainsboro;
  color: #fff;
}
.footer-wrap{
   height: _vw(100);
   background-color: #fff;
   position:sticky;
   bottom: _vw(0);
  h5{
    margin-top: _vw(20);
    margin:auto;
    width: _vw(600);
    height: _vw(80);
    line-height: _vw(80);
    background-color: rgb(241, 38, 38);
    color: #fff;
    font-size: _vw(40);
    text-align: center;
    border-radius: _vw(50);
  }
 }
}
</style>